<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="dahuiji.css"/>
</head>
<body>
	<div id="body_main" class="main">
		<ul id="options" class="options">
			<li value="1">超级困难</li>
			<li value="2">非常困难</li>
			<li value="3">比较困难</li>
			<li value="4">就选我吧</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	// OOA：飞机大战
		// 引擎：
			// 选择难度
			// 记录难度
			// 删除难度选择按钮
			// 添加logo
			// 添加loading
			// 等待2秒
			// 开始游戏：创建我的飞机，开火，创建敌机
		// 我的飞机：
			// 创建元素
			// 设置样式
			// 跟随鼠标
			// 开火：创建子弹
		// 子弹：
			// 创建元素
			// 设置样式
			// 开始运动
			// 运动结束，死亡
			// 爆炸：切换背景图，删除
		// 敌机：
			// 随机创建元素
			// 设置随机位置
			// 开始运动
				// 获取到页面上现存的子弹
				// 碰撞检测：检测子弹的位置和敌机的位置是否发生重叠
					// 撞到了，子弹，死亡
					// 同时减少敌机的血量
					// 敌机血量为0，死亡
			// 运动结束，死亡
			// 爆炸：切换背景图，删除

	function Engine(){
		// E1. 选择元素
		this.li = document.querySelectorAll(".options li");
		this.cont = document.getElementById("body_main");
		// E2. 绑定事件
		this.init();
	}
	Engine.prototype.init = function(){
		var that = this;
		for(var i=0;i<this.li.length;i++){
			this.li[i].onclick = function(){
				// E3. 记录难度，删除开始按钮
				that.grade = this.value;
				this.parentNode.remove();
				// E4. 准备创建logo和loading，模拟加载中过程
				that.loading();
			}
		}
	}
	Engine.prototype.loading = function(){
		// E5. 创建logo和loading元素
		var logo = createEle("logo");
		var loadingEle = createEle("loading");

		// E6. 计时器切换loading的背景图，实现加载效果
		var i = 0;
		this.loadingT = setInterval(() => {
			loadingEle.style.backgroundImage = `url(images/loading${(i++)%3+1}.png)`;
		}, 300);

		// E7. 计时器实现不断增加大框的背景图的y轴定位，实现背景图运动效果
		var j = 0;
		setInterval(() => {
			this.cont.style.backgroundPositionY = (j+=2) + "px";
		}, 30);

		setTimeout(() => {
			// E8. 一段时间后，删除logo删除loading，清除loading的计时器，游戏开始
			logo.remove();
			loadingEle.remove();
			clearInterval(this.loadingT);
			this.gameStart();
		}, 3000);
	}
	Engine.prototype.gameStart = function(){
		// E9. 创建我的飞机
		plane.create();
		// E10. 开火
		plane.fire(this.grade);
		// E11. 创建敌机(随机创建)
        // 设置大中小的不同的创建频率
        // new Enemy(1);
        setInterval(()=>{
            if(Math.random() > 0.2){
                new Enemy(1);
            }
        },1000)

        setInterval(()=>{
            if(Math.random() > 0.4){
                new Enemy(2);
            }
        },3000)

        setInterval(()=>{
            if(Math.random() > 0.7){
                new Enemy(3);
            }
        },7000)
	}

	var plane = {
		cont:document.getElementById("body_main"),
		create:function(){
			// P1. 创建我的飞机元素，设置位置
			this.ele = createEle("my-warplain");
			this.ele.style.left = (this.cont.offsetWidth-this.ele.offsetWidth)/2 + "px";
			this.ele.style.bottom = 0;
			// P2. 绑定移动事件
			this.addEvent();
		},
		addEvent:function(){
			var that = this;
			document.onmousemove = function(eve){
				var e = eve || window.event;
				// P3. 设置我的飞机，鼠标跟随
				that.move(e)
			}
		},
		move:function(e){
			// 计算要跟随的位置
			var l = e.clientX - this.cont.offsetLeft - this.ele.offsetWidth/2;
			var t = e.clientY - this.cont.offsetTop - this.ele.offsetHeight/2;
			// 边界限定
			if(l<0) l=0;
			if(t<0) t=0;
			if(l>this.cont.offsetWidth-this.ele.offsetWidth){
				l=this.cont.offsetWidth-this.ele.offsetWidth
			}
			// 设置给我的飞机，实现跟随
			this.ele.style.left = l + "px";
			this.ele.style.top = t + "px";
		},
		fire:function(g){
			setInterval(() => {
				// B1. 创建子弹
                this.butterArr.push(new Bullet());
			}, 1000/g);
		},
        butterArr:[]
	}


    class Bullet{
        constructor(){
            this.cont = document.getElementById("body_main");
            // B2. 创建子弹元素
            this.create();
        }
        create(){
            // 创建元素，设置位置
            this.ele = createEle("bullet");
            this.ele.style.left = plane.ele.offsetLeft + (plane.ele.offsetWidth-this.ele.offsetWidth)/2 + "px";
            this.ele.style.top = plane.ele.offsetTop - this.ele.offsetHeight + "px";
            // B3. 开始运动
            this.move();
        }
        move(){
            // 匀速运动
            this.ele.t = setInterval(() => {
                // 当到达顶部，死亡
                if(this.ele.offsetTop < 0){
                    // B4. 子弹的死亡
                    this.die();
                }else{
                    // 向上运动
                    this.ele.style.top = this.ele.offsetTop - 8 + "px";
                }
            }, 30);
        }
        die(){

            for(var i=0;i<plane.butterArr.length;i++){
                if(plane.butterArr[i] === this){
                    plane.butterArr.splice(i,1);
                }
            }

            // 清除运动的计时器
            clearInterval(this.ele.t);
            // 延迟设置爆炸的class
            setTimeout(() => {
                this.ele.className = "bullet_die";
            }, 100);
            // 延迟设置爆炸的背景图
            setTimeout(() => {
                this.ele.style.backgroundImage = "url(images/die2.png)";
            }, 200);
            // 延迟删除子弹元素
            setTimeout(() => {
                this.ele.remove();
            }, 300);
        }
    }


    class Enemy{
        constructor(type){
            this.cont = document.getElementById("body_main");
            this.type = type;
            // En1. 创建敌机元素
            this.create();
        }
        create(){
            // En2. 根据类型创建不同的敌机元素，设置不同的属性
            switch(this.type){
                case 1:
                    // 元素
                    this.ele = createEle("enemy-small");
                    // 死亡的图片数量
                    this.dieNum = 3;
                    // 血量
                    this.hp = 1;
                    // 步长
                    this.speed = 3;
                    break;
                case 2:
                    this.ele = createEle("enemy-middle");
                    this.dieNum = 4;
                    this.hp = 3;
                    this.speed = 2;
                    break;
                case 3:
                    this.ele = createEle("enemy-large");
                    this.dieNum = 6;
                    this.hp = 6;
                    this.speed = 1;
                    break;
            }
            // 设置样式
            this.ele.style.left = random(0, this.cont.offsetWidth-this.ele.offsetWidth) + "px";
            this.ele.style.top = -this.ele.offsetHeight + "px";
            // En3. 开始运动
            this.move();
        }
        move(){
            this.ele.t = setInterval(() => {
                // 当到达底部，死亡
                if(this.ele.offsetTop > this.cont.offsetHeight){
                    // En4. 死亡
                    this.die();
                }else{
                    // 向下运动
                    this.ele.style.top = this.ele.offsetTop + this.speed + "px";

                    // 碰撞检测
                    this.collision();
                }
            }, 30);
        }
        collision(){
            // 子弹.left + 子弹.width > 敌机.left
            // 敌机.left + 敌机.width > 子弹.left
            // 敌机.top + 敌机.height > 子弹.top
            // 子弹.top + 子弹.height > 敌机.top
            for(var i=0;i<plane.butterArr.length;i++){
                var b = plane.butterArr[i];
                // this.ele
                if(
                    b.ele.offsetLeft + b.ele.offsetWidth > this.ele.offsetLeft
                    &&
                    this.ele.offsetLeft + this.ele.offsetWidth > b.ele.offsetLeft
                    &&
                    this.ele.offsetTop + this.ele.offsetHeight > b.ele.offsetTop
                    &&
                    b.ele.offsetTop + b.ele.offsetHeight > this.ele.offsetTop
                ){
                    // 子弹立即死亡
                    b.die();
                    // 敌机血量减少
                    this.hp--;
                    // 当血量为0，敌机死亡
                    if(this.hp === 0){
                        this.die();
                    }
                }
            };
        }
        die(){
            // 清除运动计时器
            clearInterval(this.ele.t);
            // 计时器延迟设置爆炸图片
            var i=0;
            this.ele.dieT = setInterval(() => {
                // 爆炸图片结束后，清除计时器，删除敌机元素
                if(i == this.dieNum){
                    clearInterval(this.ele.dieT);
                    this.ele.remove();
                }else{
                    i++;
                    this.ele.style.backgroundImage = `url(images/plane${this.type}_die${i}.png)`;
                }
            }, 100);
        }
    }


    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }
	function createEle(cn){
		var div = document.createElement("div");
		div.className = cn;
		document.getElementById("body_main").appendChild(div);
		return div;
	}



	new Engine();
</script>
</html>
